<template>
	<view class="x-preview">
    <x-box bgColor="#ffffff" :title="props.title">
      <view slot="title" class="x-row">
        <slot name="icon">
          <image :src="props.icon" v-if="props.icon"></image>
        </slot>
        <view class="title">
          <slot name="title">{{props.title}}</slot>
        </view>
      </view>
      <view slot="tools"><slot name="tools"></slot></view>
      <view class="body" @tap="onClick">
        <template v-for="(c, index) in props.columns">
          <view v-if="show(c, index)" class="item"
              :class="{'x-row': props.mode == 'row', 'x-space-between': props.mode == 'space-between'}"
              :key="index">
          <view class="x-label">{{c.label}}<text v-if="props.mode == 'row'">：</text></view>

          <!-- #ifdef MP -->
<!--          <slot :name="props.columns[index].field"><view>{{getValue(c)}}</view></slot>-->
            <slot :name="c.field" />
            <view class="x-value" v-if="!$slots[c.field]">{{getValue(c)}}</view>
          <!-- #endif -->

          <!-- #ifdef H5 || APP-PLUS  -->
          <slot :name="c.field">
            <view class="x-value">{{getValue(c)}}</view>
          </slot>
          <!-- #endif -->
        </view>
        </template>
        <slot name="desc"></slot>
      </view>
      <view class="bottom">
        <slot name="bottom"></slot>
      </view>
    </x-box>
	</view>
</template>

<script setup>
  import XBox from '@/components/lib/box'
	const props = defineProps({
		data: {
			type: Object,
			default: () => {
				return {}
			}
		},

		icon: String,

		title: String,

		/**
		 * 数据项 label field
		 */
		columns: {
			type: Array,
			default: () => {
				return []
			}
		},

		check: {
			type: Function,
		},

		/**
		 * 模式 row space-between
		 */
		mode: {
			type: String,
			default: "space-between"
		},
	})

	import Helper from "@/core/helper"

	const getValue = (c) => {
		if(! Helper.empty(c.format)) {
		  return c.format(c, props.data);
    }
		let value = Helper.getValueByJson(props.data, c.field);
		value = Helper.empty(value) ? '-' : value;
    return Helper.empty(c.suffix) ? value : value + c.suffix;
	}

	/**
	 * 因为uni-app屏蔽对象中的function，所以采用通过check方法，返回字段自行判断是否显示
	 * @param {Object} c
	 */
	const show = (c, index) => {
		if (props.check) {
			return props.check(c, props.data, index);
		}

		return true;
	}

	const emit = defineEmits(['click, leftSwipe, rightSwipe'])

	const onClick = () => {
		emit('click', props.data);
	}
</script>

<style lang="less">
	.x-preview {
		background-color: #fff;

		.body {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;

			.item {
				padding: 10rpx;
				box-sizing: border-box;

				.value {
					font-size: 28rpx;
					color: #666;
					font-weight: 500;
				}
			}
		}

		.bottom:not(:empty) {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			border-top: 1px solid #e9e9e9;
		}
	}
</style>
